<template>
  <div>
    <!-- 根据二级路由动态渲染内容 -->
    <router-view />
    <div style="height:60px;"></div>
    <!-- 底部选项卡 -->
    <van-tabbar v-model="active" active-color="#36c14c" style="height: 60px">
        <van-tabbar-item name="home" icon="home-o" to="/leader/index" >首页</van-tabbar-item>
        <van-tabbar-item name="friends" icon="notes-o" to="/leader/news_index"
          >聚焦爱尔
        </van-tabbar-item>
        <van-tabbar-item name="setting" icon="contact" to="/leader/me">个人中心</van-tabbar-item
        >
      </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabSelected: this.$route.path.split('/')[2],
      active: 0
      // tabSelected: this.$route.path.split('/').pop()
    }
  },
  activated(){
    // 回到当前页时，修改tabSelected默认选中项
    this.tabSelected = this.$route.path.split('/')[2]
  },
  watch: {
    $$route: {
        handler(){
            let oriPath = this.$route.path.split('/')[2]
            if(oriPath=='index') {
                this.active = 0
            } else if(oriPath == 'news_index') {
                this.active = 2
            }else if(oriPath == 'me') {
                this.active = 3
            }
        },
        immediate: true
    }
   
  }
}
</script>